<!--

 * @Description: 自定义公共组件(按钮)
 *	props属性:
 *		1.class { string } default:"" class名，用来修改样式
 *		1.contentClass { string } default:"" 内部class名，用来修改样式
-->
<template>
  <button class="comm-button" :class="[props.class, { 'comm-button-active': props.active }]">
    <span class="comm-button-content" :class="contentClass">
      <slot></slot>
    </span>
  </button>
</template>

<script setup>
const props = defineProps({
  class: {
    type: String,
    default: '',
  },
  contentClass: {
    type: String,
    default: '',
  },
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.comm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 15px;
  background-color: rgba(32, 50, 71, 0.6);
  border: 1px solid #3b618f;
  border-radius: 4px;
  cursor: pointer;
  .comm-button-content {
    position: relative;
    color: white;
    font-weight: 500;
  }
}
.comm-button:hover {
  background: linear-gradient(#04090cb0, #1190d0c2);
  // border-color: linear-gradient(#47E0FF, #48FFFF00);
}
.comm-button-active {
  background: linear-gradient(#04090cb0, #1190d0c2) !important;
  border-color: #47e0ff !important; /* 可选：加个边框高亮 */
  box-shadow: 0 0 0 2px rgba(71, 224, 255, 0.3);
}
</style>
